import styled from "styled-components";

export const TabWrapper = styled.div`
  /* display: flex; */
  /* overflow: hidden; */

  .item {
    margin-right: 16px;
    box-sizing: content-box;
    flex-basis: 120px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-radius: 3px;
    border: 0.5px solid #d8d8d8;
    white-space: normal;
    cursor: pointer;
    text-align: center;
    font-size: 17px;

    ${(props) => props.theme.mixin.boxShadow}

    &:last-child {
      margin-right: 0;
    }

    &.active,
    &:hover {
      color: #fff;
      background-color: ${(props) => props.theme.color.secondColor};
    }
  }
`;